<template>
  <div class="app-container">
    <el-card class="search-from" ref="searchRef">
      <el-form
        :inline="true"
        class="form-inline"
        :model="searchfilter"
        ref="searchFormRef"
        label-width="70"
      >
        <el-row>
          <template v-for="(item, index) in formItem">
            <el-col :span="6">
              <el-form-item
                :label="item.label"
                v-show="hasFolder(index)"
                :prop="item.field"
              >
                <template v-if="item.field == 'timeRange'">
                  <el-date-picker
                    v-model="searchfilter[item.field]"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                  />
                </template>
                <template v-else>
                  <el-input v-model="searchfilter[item.field]"></el-input>
                </template>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="6" :offset="18">
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="searchLog">查询</el-button>
            <el-button type="primary" :icon="Search" @click="reset(searchFormRef)"
              >重置</el-button
            >
            <el-button link :icon="ArrowUp" v-if="!isFold" @click="isFold = !isFold"
              >收起</el-button
            >
            <el-button link :icon="ArrowDown" v-else @click="isFold = !isFold"
              >展开</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="list">
  
     <div class="list-table">
       
        <el-table  style="height:100%"  :data="securityList?.items" >
          <el-table-column
            type="index"
            width="100"
            label="#"
            align="center"
          ></el-table-column>
          <template v-for="(item, index) in columns">
            <el-table-column
              :min-width="item.width"
              v-if="item.field == 'creationTime'"
              :prop="item.field"
              :label="item.label"
            >
              <template #default="scope">
                {{ moment(scope.row.field).format("YYYY-MM-DD HH:mm:ss") }}
              </template>
            </el-table-column>
            <el-table-column
              :min-width="item.width"
              v-else
              :prop="item.field"
              :label="item.label"
            >
            </el-table-column>
          </template>
        </el-table>
      </div>

      <div class="paging">
      
        <el-pagination
  
          background
          layout="prev, pager, next"
          :total="Number(tablePage.totalResult)"
          :page-size="tablePage.pageSize"
          @change="handlePageChange"
          v-model:current-page="tablePage.currentPage"
        />
      </div>

    </el-card>
  </div>
</template>
<script setup lang="ts">
import AppContainer from "@/components/AppContainer/index.vue";
import moment from "moment";

import { Search, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { FormInstance } from "element-plus";
import { getSecurityLogs } from "@/api/identity/logs/securitylog/index";
const searchfilter = ref<object>({
  applicationName: null,
  identity: null,
  actionName: null,
  userName: null,
  timeRange: null,
  client: null,
});
const formItem = [
  {
    label: "应用程序",
    field: "applicationName",
  },
  {
    label: "标识",
    field: "identity",
  },
  {
    label: "操作",
    field: "actionName",
  },
  {
    label: "用户名",
    field: "userName",
  },
  {
    label: "日期",
    field: "timeRange",
  },
];

const columns = [
  {
    label: "时间",
    field: "creationTime",
    width: 140,
  },
  {
    label: "操作",
    field: "action",
    width: 140,
  },
  {
    label: "IP地址",
    field: "clientIpAddress",
    width: 110,
  },
  {
    label: "浏览器信息",
    field: "browserInfo",
    width: 200,
  },
  {
    label: "应用程序",
    field: "applicationName",
    width: 140,
  },
  {
    label: "标识",
    field: "identity",
    width: 140,
  },
  {
    label: "用户名",
    field: "userName",
    width: 140,
  },
  {
    label: "Client",
    field: "clientId",
    width: 120,
  },
  {
    label: "CorrelationID",
    field: "correlationId",
    width: 100,
  },
];

const securityList = ref<any>({});

const tablePage = ref<any>({
  currentPage: 1,
  pageSize: 10,
  totalResult: 0,
});
let searchFormRef = ref<FormInstance>();
const isFold = ref<boolean>(false);

const hasFolder = (index: number) => {
  if (index < 4) {
    return true;
  } else {
    return !isFold.value;
  }
};
const getSecurityList = async () => {
  let param = { ...searchfilter.value };
  param.skipCount = (tablePage.value.currentPage - 1) * tablePage.value.pageSize;
  param.maxResultCount = tablePage.value.pageSize;
  if (param.timeRange != null && param.timeRange.length > 0) {
    param.startTime = `${param.timeRange[0]} 00:00:00`;
    param.endTime = `${param.timeRange[1]} 23:59:59`;
  }
  securityList.value = await getSecurityLogs(param);
  tablePage.value.totalResult = securityList.value.totalCount;
};
const handlePageChange = (currentPage: number, pageSize: number) => {
  tablePage.value.currentPage = currentPage;
  getSecurityList();
};
const searchLog = () => {
  tablePage.value.currentPage = 1;
  getSecurityList();
};
const reset = (formEl: FormInstance | any) => {
  if (!formEl) return;
  formEl.resetFields();
};

onMounted(() => {
  getSecurityList();
});
</script>
<style scoped type="sass">
.el-row {
  width: 100%;
}
.el-form--inline .el-form-item {
  display: flex;
  justify-content: space-between;
}

</style>
